<template>
	<view class="count" :style="{background:color}">
		<view class="wid100 poAbs" style="height: 775rpx;background: linear-gradient(#e9ffe4, #F6F6F6);top: 0;z-index: 1;"></view>
		<view class="poFix wid100" style="background: #e9ffe4;top: 0;z-index: 11;">
			<!-- 状态栏高度 -->
			<view :style="{ height: `${statusBarHeight}px` }"></view>
			<!-- 自定义导航栏高度 并 居中 -->
			<view class="dis disAl disJuC poRel" :style="{height: `${barHeight}px`}">
				<view class="poAbs" style="width: 32rpx;height: 32rpx;left: 22rpx;" @click="fanhui()">
					<image src="../../../static/fanhui.png" class="wh100"></image>
				</view>
				<view class="foSi35" style="line-height: 36rpx;">我的优惠券</view>
			</view>
			<view class="wid90 mar mar-top20 dis foSi28" :style="{border: '4rpx solid '+tColor,background : tColor}"
				style="height: 76rpx;border-radius: 60rpx;">
				<view class="wid33 hei100 dis disAl disJuC" :style="taIdx==0?'background-color: #fff;color: '+tColor+';':'color: #fff;'" 
					style="border-radius: 60rpx;" @click="tClick(0)"> 通用优惠券</view>
				<view class="wid33 hei100 dis disAl disJuC" :style="taIdx==1?'background-color: #fff;color: '+tColor+';':'color: #fff;'"
					style="border-radius: 60rpx;" @click="tClick(1)">门店优惠券</view>
				<view class="wid33 hei100 dis disAl disJuC" :style="taIdx==2?'background-color: #fff;color: '+tColor+';':'color: #fff;'"
					style="border-radius: 60rpx;" @click="tClick(2)">电商优惠券 </view>
			</view>
		</view>
		<view :style="{ height: `calc(${statusBarHeight+barHeight}px + 120rpx)` }"></view>
		<scroll-view :style="{ height: `calc(100vh - ${statusBarHeight+barHeight}px - 120rpx)` }" style="z-index: 2;"
			class="wid100 poRel" scroll-y="true" @scrolltolower="lower">
			<view style="height: 1rpx;"></view>
			<view v-if="list.length == 0" class="wid90 mar fowe800 foSi35">
				<view style="height: 50rpx;"></view>
				<view class="dis disJuC">
					<image src="../../../static/zanwu.png" style="width: 400rpx;height: 300rpx;"></image>
				</view>
				<view class="textCen mar-top20" style="color: #868686;">暂无数据</view>
			</view>
			<block v-for="(item,index) in list" :key="index">
				<view class="wid90 mar mar-top30" :style="'background-image: url('+urlImage+'/wechatimg/linshi5.png);'" style="height: 212rpx;box-sizing: border-box;
					background-size: 100% 100%;">
					<view style="height: 50rpx;"></view>
					<view class="dis fowe600">
						<view class="foSi50 textCen" style="width: 180rpx;color: #DF132A;line-height: 45rpx;">5<span class="foSi28">元</span></view>
						<view class="mar-left30 foSi32" style="color: #000;">新人专享礼</view>
					</view>
					<view class="dis mar-top10 f24" style="color: #737373;">
						<view class="textCen" style="width: 180rpx;">使用规则</view>
						<view class="mar-left30">有效期至2024-06-10</view>
					</view>
				</view>
			</block>
			<view style="height: 50rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import utils from '@/common/utils';
	export default {
		name: 'couponDl',
		data() {
			return {
				statusBarHeight: 0,
				barHeight: 0,
				taIdx: 0,
				list: [],
				last_page: 0,
				page: 1,
			}
		},
		async onLoad(options) {
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			const {top,height} = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			this.getSystem()
			this.getList()
		},
		methods: {
			async getList(){
				let {
					data
				} = await this.util.request({
					'url': this.api.hydj,
					data: {}
				})
				// this.list = data
				console.log(data)
			},
			tClick(index){
				if(index != this.taIdx){
					this.taIdx = index
				}
			},
			lower(e) {
				if(this.last_page > this.page){
					this.page++
					this.getList()
				}
			},
			fanhui(){
				uni.navigateBack(1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.count{
		min-height: 100vh;
		background-color: #F6F6F6;
	}
	.cl-main {
		padding: 50rpx 30rpx;
	}

	.timg {
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto;
	}

	.cl-bd {
		padding: 70rpx 0 0;
		margin-top: -60rpx;
		border-radius: 12rpx;
	}

	.bbd {
		border-bottom: 1px dashed #EBEBED;
	}

	.yd {
		width: 6rpx;
		height: 6rpx;
		border-radius: 50%;
		background: #999;
		margin: 17rpx 12rpx 0 5rpx;
	}

	.ljsy {
		width: 60%;
		height: 75rpx;
	}

	.ydl,
	.ydr {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		top: -20rpx;
	}

	.ydl {
		left: -17rpx;
	}

	.ydr {
		right: -17rpx;
	}

	.jtactive {
		transform: rotate(90deg);
	}

	.coubb {
		height: 0;
		transition: all 0.3s ease-in-out;

		&.cactive {
			height: auto;
		}
	}

	.coubbv {
		opacity: 0;
		transform: translateY(-50%);
		transition: 0.3s ease-in-out;

		&.show {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.cdlht {
		min-width: 170rpx;
	}
	.zqmimg {
		width: 380rpx;
		height: 380rpx;
		margin: 10rpx auto;
		.zzc{
			width: 100%;
			height: 100%;
			top: 0;
			background: #ccc;
			opacity: 0.8;
		}
	}
</style>
